<template>
	<view class="container">
		<view class="block-list">
			<block v-for="(item,index) in codeArr">
				<view class="block" :class="inputIndex==index?'filcker':''">{{item.num}}</view>
			</block>
		</view>
		<input type="text" placeholder="请输入" :focus="true" :maxlength="inputLength" @input="inputNum" />
	</view>
</template>

<script>
	export default {
		name: "code-input",
		data() {
			return {
				inputLength: 4,
				codeArr: [],
				inputIndex: 0,
				inputValue: '',
				toward: 'front'
			};
		},
		watch: {
			inputValue(newValue, oldValue) {
				console.log('123', newValue, oldValue);
				if (newValue > oldValue) {
					this.toward = 'front';
					this.inputIndex = newValue.length
					console.log('向前', this.inputIndex);
				} else {
					this.toward = 'behind';
					this.inputIndex = newValue.length
					console.log('向后', this.inputIndex);
				}
			}
		},
		methods: {
			inputNum(e) {
				console.log(e);
				this.inputValue = e.detail.value;
				this.restCode();
				let strArr = Array.from(this.inputValue);
				strArr.forEach((item, index) => {
					this.codeArr[index].num = Number(item);
				})
			},
			restCode() {
				this.codeArr = Array.from({
					length: this.inputLength
				}, () => ({
					num: '',
					focusFlag: false
				}));
			}
		},
		created() {
			this.restCode()
			console.log(this.codeArr);
		}
	}
</script>

<style lang="scss">
	$focus-color: #2524aa;

	@mixin flex-row($jus, $ali) {
		display: flex;
		justify-content: $jus;
		align-items: $ali;
	}

	.container {
		position: relative;
		width: 100%;

		input {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
		}
	}

	.block-list {
		@include flex-row(center, center);
		width: 100%;
	}

	.block {
		@include flex-row(center, center);
		width: 100rpx;
		height: 100rpx;
		border-color: lightgray;
		border-width: 2rpx;
		border-style: solid;
		box-sizing: border-box;
		font-size: 50rpx;
		font-weight: 700;


		&:not(:last-child) {
			margin-right: 20rpx;
		}
	}

	.filcker {
		position: relative;
		border-color: $focus-color;


		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 2rpx;
			height: 40rpx;
			animation: 1s ease-in-out running infinite;

		}
	}

	@keyframes running {
		0% {
			opacity: 1;
			background-color: $focus-color;
		}

		50% {
			opacity: 0.6;
		}

		100% {
			opacity: 1;
		}
	}
</style>